<template>
	<view class="content" :style="theme">
		<view class="u-demo-block">
			<view class="u-demo-block__content">
				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<u--form labelPosition="top" :model="model1" labelWidth="10em">
					<u-form-item label="会员卡号" borderBottom>
						<u--input v-model="model1.number" border="none" placeholder="请输入会员卡号" readonly>
						</u--input>
					</u-form-item>
					<u-form-item label="手机号" borderBottom>
						<u--input v-model="model1.phone" border="none" placeholder="请输入手机号" readonly>
						</u--input>
					</u-form-item>
					<u-form-item label="验证码" prop="yzm" borderBottom>
						<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
						<!-- #ifndef APP-NVUE -->
						<u-input v-model="model1.yzm" type="number" border="none" placeholder="验证码" clearable
							maxlength="6" prefixIcon="lock" fontSize="30rpx" prefixIconStyle="font-size: 40rpx;color: #B7BBC5">
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<u--input v-model="model1.yzm" type="number" border="none" placeholder="请输入验证码"
								clearable maxlength="6" prefixIcon="lock" fontSize="30rpx" prefixIconStyle="font-size: 40rpx;color: #B7BBC5">
								<!-- #endif -->
								<template slot="suffix">
									<u-code ref="uCode" type="text" @change="codeChange" seconds="60"
										changeText="X秒重新获取" customStyle="height: 50rpx"></u-code>
									<u-button @tap="getCode" :text="tips" type="text" size="normal"
										customStyle="color: var(--color);font-size: 28rpx;height: 50rpx"></u-button>
								</template>
								<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						</u--input>
						<!-- #endif -->
					</u-form-item>
					<u-form-item label="新密码" borderBottom>
						<u--input v-model="model1.newPassword" type="number" password border="none"
							placeholder="请输入6位数字新密码" maxlength="6">
						</u--input>
					</u-form-item>
					<u-form-item label="确认新密码" borderBottom>
						<u--input v-model="model1.qPassword" type="number" password border="none" placeholder="请再次输入6位数字新密码"
							maxlength="6">
						</u--input>
					</u-form-item>
				</u--form>
				<view class="foot">
					<view class="footBtn" @click="$noMultipleClicks(submit)">保存</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noClick: true,
				model1: {},
				id: '',
				tips: '',
			}
		},
		onLoad(ops) {
			this.model1 = uni.getStorageSync('userInfo')
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			// fpNumInput() {
			// 	const o = this.model1.newPassword;
			// 	console.log(12312, o)
			// 	const inputRule = /^(0+)|[^\d]+/g //修改inputRule 的值
			// 	this.model1.newPassword = o.replace(inputRule, '');
			// },
			getCode() {
				if (!this.model1.phone) {
					this.$app.showToast('请输入新手机号')
					return false
				}
				if (this.model1.phone && this.model1.phone.length != 11) {
					this.$app.showToast('请输入11位手机号')
					return false
				}
				if (this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$app.ajax({
						data: {
							userId: this.model1.id,
							param: {
								phone: this.model1.phone,
								type: '02'
							}
						},
						api: this.$api.verificationCode()
					}).then((res) => {
						uni.hideLoading();
						if (res.errorCode == '000000') {
							uni.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						}
					}).catch(() => {
						uni.hideLoading();
						console.log('err', err)
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			submit() {
				if (!this.model1.yzm) {
					this.$app.showToast('请输入验证码')
					return false
				}
				if (!this.model1.newPassword) {
					this.$app.showToast('请输入新密码')
					return false
				}
				let x = /^[0-9]{6,6}$/gim;
				if(!(x.test(this.model1.newPassword))){
					this.$app.showToast('请输入6位数字新密码')
					return false
				}
				// if (this.model1.newPassword.length != 6) {
				// 	this.$app.showToast('请输入正确6位密码')
				// 	return false
				// }
				if (!this.model1.qPassword) {
					this.$app.showToast('请再次输入6位数字新密码')
					return false
				}
				if (this.model1.qPassword != this.model1.newPassword) {
					this.$app.showToast('两次输入的密码不一致')
					return false
				}
				this.$app.ajax({
					data: {
						userId: this.model1.id,
						param: {
							id: this.model1.id,
							payPw: this.model1.newPassword,
							vcode: this.model1.yzm
						}
					},
					api: this.$api.changePassword()
				}).then((res) => {
					if (res.errorCode == '000000') {
						this.$app.showToast('修改成功')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}
				}).catch(() => {})
			},
		},
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.content {
		padding: 30rpx 30rpx;
		box-sizing: border-box;
	}

	.foot {
		position: fixed;
		left: 30rpx;
		bottom: 30rpx;
		width: 690rpx;
		z-index: 999;

	}
</style>